<template>
  <div id="app">
    <home-header></home-header>
    <home-search ref='fixedBar' :isFixed='isFixed'></home-search>
    <home-swiper></home-swiper>
    <home-icons></home-icons>
    <home-shop-list ref='shoplist' :isFixed2='isFixed2'></home-shop-list>
    <!-- <div class="show-list" ref="wrapper">
        <div>
          <home-shop-list></home-shop-list>
        </div>
    </div> -->
    
  </div>
</template>
<script>
import HomeHeader from '@/components/home/Header'
import HomeSwiper from '@/components/home/Swiper'
import HomeIcons from '@/components/home/Icons'
import HomeShopList from '@/components/home/ShopLists'
import HomeSearch from '@/components/home/HomeSearch'
export default {
  components: {
    'HomeHeader': HomeHeader,
    'HomeSwiper': HomeSwiper,
    'HomeIcons': HomeIcons,
    'HomeShopList': HomeShopList,
    'HomeSearch': HomeSearch
  },
  data () {
    return {
      shopListTop: 0,
      isFixed: false, // bar浮动
      isFixed2: false,
      offsetTop: 0   // 触发bar浮动的阈值
    }
  },
  mounted () {
    // console.log(this.$refs.fixedBar.$el.offsetTop) 
    // 设置bar浮动阈值为 #fixedBar 至页面顶部的距离
    this.offsetTop = this.$refs.fixedBar.$el.offsetTop
    this.shopListTop = this.$refs.shoplist.$el.offsetTop
    console.log('shopTop:',this.shopListTop,this.$refs.shoplist.$el)
    
    // 开启滚动监听
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll); // 离开页面 关闭监听 不然会报错
  },
  methods: {
    // 滚动监听  滚动触发的效果写在这里
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // console.log(scrollTop,this.offsetTop)
      
      if (scrollTop >= this.offsetTop) {
        this.isFixed = true;
        // this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
      } else {
        this.isFixed = false;
        // this.marginTop = 0;
      }

      if (scrollTop >= this.shopListTop - 70) {
        this.isFixed2 = true;
        // this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
      } else {
        this.isFixed2 = false;
        // this.marginTop = 0;
      }

      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop2 = document.documentElement.scrollTop||document.body.scrollTop
      // 变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight
      // console.log(scrollTop2,windowHeight,scrollHeight)
      
      if(scrollTop2 + windowHeight == scrollHeight) {
        console.log('bottom')
        
      }
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>
